<!DOCTYPE html>
<html>
<head>
    <title>Custom Polygon Styles</title>
    <meta charset="UTF-8">
    <title>WMS GetFeatureInfo (Image Layer)</title>
    <script src="OpenLayers4.3.1/ol.js"></script>
    <link rel="stylesheet" href="OpenLayers4.3.1/ol.css" type="text/css">

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="js/turf.min.js" charset="utf-8"></script>
    <script src="js/common.js" charset="utf-8"></script>
    <!--<script src="js/cells.js" charset="utf-8"></script>-->
    <!--cells-->
    <script src="js/allCells.js" charset="utf-8"></script>
    <script src="js/addCellsLayer.js" charset="utf-8"></script>

    <!--grids-->
    <script src="js/grids.js" charset="utf-8"></script>
    <script src="js/addGridLayer.js" charset="utf-8"></script>
    <!--addCellSelect-->
    <script src="js/addCellSelect.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/selectedCellStyle.css">

    <!--addLine-->
    <script src="js/addLineLayer.js"></script>
    <script src="./tools/gpsLine.js"></script>
    <!--瓦片地图-->
    <script src="js/createTileMapLayer.js"></script>
</head>
<body>
<button  id="addCellLayer" onclick="addCellsLayerFun()">addCellLayer</button>
<button  id="addGridLayer" onclick="addGridLayerFun()">addGridLayer</button>
<button  id="addCellSelect" onclick="addCellSelectFun()">addCellSelect</button>
<button  id="addLineLayer" onclick="addLineLayerFun()">addLineLayer</button>

<label for="speed">
    speed:&nbsp;
    <input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>


<script>
    var qingyuan =ol.proj.fromLonLat([113.5082512010734,23.76968073642652]);
    var guilin = ol.proj.fromLonLat([110.290195,25.273566]);
    var styles = [
        /* We are using two different styles for the polygons:
         *  - The first style is for the polygons themselves.
         *  - The second style is to draw the vertices of the polygons.
         *    In a custom `geometry` function the vertices of a polygon are
         *    returned as `MultiPoint` geometry, which will be used to render
         *    the style.
         */
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width:1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            })
        })
        ,
        new ol.style.Style({
            geometry: function(feature) {

                if(feature.R.color){
//                    console.log(feature.get('color'));

                    // return the coordinates of the first ring of the polygon
                    feature.setStyle( new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'green',
                            width:1
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(0, 204, 17,0.2)'
                        })
                    }));
                }
            }
            })
    ];
//    source.addFeature(sector);
//    new ol.layer.Tile({
//        source:new ol.source.XYZ({
//            attributions:[attribution],
//            url:"http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
//        })
//    }),
    //地图服务器配置，若本地未搭建地图环境，可以请求服务器上的
    var mapLayer =    new ol.layer.Image({
        source:  new ol.source.ImageWMS({
//            localhost
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'chinaMainLand',tiled:true},
//            //服务器
//            url:"http://222.84.165.140:8080/geoserver/wms",
//            params: {'LAYERS': 'china:chinaMainLand',tiled:true},
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
        })
    });


    //地图瓦片服务器配置，若本地未搭建地图环境，可以请求服务器上的
//    var mapTileLayer =    new ol.layer.Image({
//        source:  new ol.source.TileImage({
//            projection:ol.proj.get('EPSG:4326'),
//            tileSize:256,
//            maxZoom:4,
//            minZoom:0,
//
//        })
//    });

    //调用天地图接口
    //地图层
    var TDTMapLayer=    new ol.layer.Tile({
                source:new ol.source.XYZ({
                    url:"http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                })
            });

    //地形层
    var TDTGisLayer=    new ol.layer.Tile({
        source:new ol.source.XYZ({
            url:"http://t2.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}"
        })
    });

    //地名层
    var TDTNameLayer =  new ol.layer.Tile({
                source:new ol.source.XYZ({
                    url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
                })
           });
    var map = new ol.Map({
        layers: [
//            mapLayer  ,  //若本地为搭建起地图服务器，将这行注释掉时可以直接查看覆盖图层（但无地图作为背景）
//            TDTMapLayer,
//            TDTGisLayer,
     //       TDTNameLayer
                //调用瓦片地图(注意，瓦片地图使用的坐标方式为经纬度，与其他坐标方式不同)
            createTileLayer()
            ],
        target: 'map',
        view: new ol.View({
//            center: qingyuan,
            center: guilin,
            zoom: 9
        })
    });

</script>

</body>
</html>